<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<style type="text/css">
    html, body { overflow: visible;}
</style>



</head>
<style>
	.bc_fff{background-color: #fff;}
	.box{height: 300px;overflow: auto;}
	.showTime{background-color: #F8F8F8 !important;border:0 !important;width: 60px !important;}
	#box p.pos-r{border-bottom: 1px dashed #ddd;margin:0;padding: 10px 50px 10px 0;height: 20px;line-height: 20px; text-overflow}
	.t-10{top:10px}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body style="background-color: #F8F8F8; overflow: auto;min-width:auto;">
<div class="pt-10 pb-10 pl-20 bc_fff"><b>正在处理你导入的数据，请稍等......</b></div>
<!--进度条-->
<div class="progress_bar pl-20 pr-20">
	<div class="pos-r lh-30"><b>数据处理进度</b><div class="pos-a right bottom">耗时：<input  disabled='disabled'  type="text" class="showTime" ></div></div>
	<div class="number-pb">
		<div class="number-pb-shown sun" ></div>
		<div class="number-pb-num" ></div>
	</div>
</div>
<div class="box bc_fff pd-10">
	<div id="box"></div>
	<a name="anchor"></a>
</div>
<div class="lh-30 pl-20 pr-20" id="game_over"> <p>导入<span id="total_num">0</span>条，新增<span id="add_num">0</span>条，失败<span id="error_num">0</span>条。</div>

<script src="../../../js/jquery-3.1.1.min.js"></script>
<script src="../../../js/number-pb.js"></script> 
<script src="../../../js/jquery.velocity.min.js"></script> 
<script type="text/javascript">
var excel_name = {$excel_name};console.log(excel_name);
var url='ws://118.89.239.91:10101';
//var url='ws://127.0.0.1:6688';
var so=false;mkey = '';
//创建socket，注意URL的格式：ws://ip:端口
so=new WebSocket(url);
//握手监听函数
so.onopen=function(){
    //状态为1证明握手成功，然后把client自定义的名字发送过去
    if(so.readyState==1){
    	console.log('type=import&key='+mkey+'&excel_name='+excel_name)
        so.send('type=import&key='+mkey+'&excel_name='+excel_name);
    }
}
 
//握手失败或者其他原因连接socket失败，则清除so对象并做相应提示操作
so.onclose=function(e){
    so=false;
    
    console.log('socket退出')
}
 
//数据接收监听，接收服务器推送过来的信息，返回的数据给msg，然后进行显示
so.onmessage=function(msg){
	var data = JSON.parse(msg.data);mkey=data.code;percent = data.percent;
		$('#total_num').text(data.total);
		$('#add_num').text(data.add);
		$('#error_num').text(data.error_num);
		re_str = '';
	    $('.progress_bar .number-pb').NumberProgressBar().reach(percent);
	    console.log(data);
	    if(data.status){
	    	clearInterval(times);    //清除对函数的调用
	    	if(data.error){
	    		$("#game_over").append('<span id="error_show">正在生成错误列表...</span>');
	    	}
	    }
	    if(data.error_over){
	    	
	    	$('#error_show').css('display','none');
			re_str += "<a class='c-orange' href='"+data.error_over+"'>下载错误列表</a></p>";
			$("#game_over").append(re_str);
		}
        location.href = '#anchor';
	
}
</script>
<script type="text/javascript">
	//计时器
	var timeIndex = 0;
	setTime();
	times = setInterval(setTime, 1000);    //每隔1秒执行函数
	$(".btnr").click(function(){
		clearInterval(times);    //清除对函数的调用
	});
	$(".btnl").click();//开始计时器
	function setTime(){
		var hour = parseInt(timeIndex / 3600);    // 计算时
		var minutes = parseInt((timeIndex % 3600) / 60);    // 计算分
		var seconds = parseInt(timeIndex % 60);    // 计算秒
		hour = hour < 10 ? "0" + hour : hour;
		minutes = minutes < 10 ? "0" + minutes : minutes;
		seconds = seconds < 10 ? "0" + seconds : seconds;
		$(".showTime").val(hour + ":" + minutes + ":" + seconds);
		timeIndex++;
	}
	var percent = 0;
	$('.progress_bar .number-pb').NumberProgressBar().reach(percent);
	//获取数据添加到div

</script>
</body>
</html>